<template>
  <div class="login-background" style="background-image: url('/imgs/admin/bc1.jpg')">
  <el-container class="login-container">
      <el-header>
<!--        <img src="/imgs/admin/logo.png" alt="imgs/admin/logo.png" class="system-logo">-->
        <div class="system-title">OA办公管理系统</div>
      </el-header>
      <el-main class="login-main">
        <el-card class="login-card">
          <h3 class="login-title">用户登录</h3>
          <el-form label-position="top" class="login-form">
            <el-form-item label="用户名">
              <el-input placeholder="请输入用户名" v-model="loginForm.username" ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input placeholder="请输入密码" type="password" v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-row :gutter="10"> <!-- 调整行间距 -->
                <el-col :span="10"> <!-- 调整验证码输入框占比 -->
                  <el-input placeholder="请输入验证码" v-model="loginForm.code" @keydown.enter="login"></el-input>
                </el-col>
                <el-col :span="8" class="captcha-container"> <!-- 验证码图片 -->
                  <img v-if="captchaUrl" :src="captchaUrl" alt="验证码" class="captcha-img" />
                </el-col>
                <el-col :span="6"> <!-- 获取验证码按钮 -->
                  <el-button type="primary" :disabled="isCounting" @click="getCaptcha" style="width: 100%;">
                    <span v-if="isCounting">{{ countDown }} 秒后可重发</span>
                    <span v-else>获取验证码</span>
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from "axios";
import { ElMessage } from "element-plus";
import router from "@/router";
import response from "core-js/internals/is-forced";

const loginForm = ref({
  username: '',
  password: '',
  code: '',
  captchaKey:''
});

// 验证码URL
const captchaUrl = ref('');
const isCounting = ref(false);  // 控制倒计时
const countDown = ref(0);  // 倒计时计数

// 获取验证码
const getCaptcha = async () => {
  try {
    debugger;
    console.log("获取验证码-----------");
    // 请求验证码的API地址
    const response = await axios.get(BASE_URL + '/oa/user/login/captcha');

    console.log("response:",response)
    // // 假设验证码的 URL 在响应数据中
    // const captchaUrl = response.data.url; // 根据你的后端返回格式调整
    // console.log(captchaUrl);
    // 设置验证码 URL
    loginForm.value.captchaKey = response.data.data.captchaKey;
    captchaUrl.value = response.data.data.base64Img; // 将验证码 URL 存入响应式变量中
    startCountDown();  // 开始倒计时
    console.log("captchaUrl:",captchaUrl.value);
  } catch (error) {
    console.error("获取验证码失败:", error);
    // 处理错误，例如显示错误信息
    ElMessage.error('获取验证码失败，请重试');
  }
};


// 启动倒计时功能
const startCountDown = () => {
  countDown.value = 30;  // 设置倒计时秒数
  isCounting.value = true;

  const interval = setInterval(() => {
    countDown.value--;
    if (countDown.value === 0) {
      clearInterval(interval);
      isCounting.value = false;  // 重置倒计时
    }
  }, 1000);
};

// 登录方法
const login = () => {
  // 检查输入字段是否填写完整
  if (!loginForm.value.username || !loginForm.value.password || !loginForm.value.code) {
    alert('请填写所有字段');
    return;
  }
  // 发送登录请求
  axios.post(BASE_URL + '/oa/user/login', loginForm.value)
      .then(response => {  // 修正此处
        console.log("loginForm.value", loginForm.value);
        console.log("登录中：response", response);
        //
        const responseCode = response.data.code;
        if (responseCode === 4200 || responseCode === 4201) {
          //token 无效
          ElMessage.info("Token失效，请重新登录！");
          router.push('/login');
        }
        if (responseCode === 2001) {
          ElMessage.success("登录成功");
          console.log("登录成功...");
          // 登录成功，跳转到首页
          console.log("登录token:", response.data.data.token);
          // 登录成功将token和用户信息存入localStorage
          localStorage.setItem('Authorization', response.data.data.token);
          console.log("登入存入的用户信息：",response.data.data);
          localStorage.setItem('user',JSON.stringify(response.data.data));
          router.push('/');
        } else {
          // 登录失败，显示错误信息
          console.log("登录失败...");
          ElMessage.error(response.data.msg);
        }
      })
      .catch(error => {
        // 处理请求错误
        ElMessage.error("登录请求失败，请重试");
        console.error("登录请求错误:", error);
      });
};

</script>

<style scoped>

.login-background {
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 添加背景颜色层，并将其与图片混合 */
  background-color: rgba(0, 0, 0, 0.1); /* 0.5 表示 50% 的透明度 */
  background-blend-mode: overlay; /* 叠加图片和背景颜色 */
}


.login-container {
  width: 100%;
  max-width: 600px;
  padding: 30px;
}

.system-title {
  color: #4a90e2; /* 使用更柔和的蓝色，避免刺眼 */
  font-weight: 600; /* 字重稍微减轻，避免过于粗重 */
  font-size: 36px; /* 略微减小字体尺寸 */
  text-align: center;
  letter-spacing: 2px; /* 减小字间距，使文字更紧凑 */
  margin-bottom: 40px; /* 增加标题与登录框的距离 */
  margin-top: 10px; /* 调整顶部间距 */
}



.login-main {
  display: flex;
  justify-content: center;
}

.login-card {
  background-color: rgba(255, 255, 255, 0.8); /* 设置背景颜色为白色，并且透明度为 90% */
  width: 80%;
  padding: 30px;
}


.login-title {
  text-align: center;
  margin-bottom: 20px;
}

.login-form {
  margin-top: 20px;
}

.captcha-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.captcha-img {
  cursor: pointer;
  width: 100px; /* 控制验证码图片宽度 */
  height: 40px; /* 控制验证码图片高度 */
  margin-left: 10px; /* 调整图片与输入框的间距 */
}


</style>
